<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogFormId ? '编辑字典' : '新增字典'"
    width="700px"
    :append-to-body="true"
    :destroy-on-close="true"
    :before-close="onCancel"
    align-centerwidth="800px"
    @close="close"
  >
    <template #default>
      <el-form
        ref="dialogRef"
        :model="dictForm"
        :rules="formRules"
        label-width="100px"
        class="user-editor-form"
      >
        <el-form-item label="字典类型名称" prop="name">
          <el-input v-model="dictForm.name" show-word-limit placeholder="请输入字典类型名称" />
        </el-form-item>

        <el-form-item label="分类" prop="type">
          <el-input v-model="dictForm.type" placeholder="请输入分类" />
        </el-form-item>
        <el-form-item label="描述" prop="remarks">
          <el-input
            type="textarea"
            v-model="dictForm.remarks"
            placeholder="请输入字典键值"
            maxlength="200"
            show-word-limit
          /> </el-form-item
      ></el-form>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
//系统配置
import {
  ref,
  reactive,
  onBeforeMount,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs
} from 'vue'
import { ElMessage } from 'element-plus'

// 接口
import { dictAdd, dictGet, dictUpdate } from '@api/dict'
import { IDictFormInfo } from '@interface/dict'
//业务模型
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  dictUpdateId: {
    type: String,
    default: ''
  }
})

const state = reactive({
  dictForm: <IDictFormInfo>{
    name: '',
    type: '',
    remarks: ''
  }
})

const { dictForm } = toRefs(state)

const dialogVisible = ref(props.dialogVisible)
const dictUpdateId = ref(props.dictUpdateId)

onBeforeMount(() => {
  const { proxy } = getCurrentInstance() as ComponentInternalInstance
  if (proxy) {
    ;(proxy as any).getDicts(['system_dict_type'])
  }

  if (dictUpdateId.value != '') {
    dictGetInfo(dictUpdateId.value)
  }
})

//详情
const dictGetInfo = async (id: string) => {
  const res = await dictGet(id)
  console.log(res, 'res')
  Object.assign(dictForm.value, res.data)
}
//提交
const onSubmit = async () => {
  if (dictUpdateId.value != '') {
    await updateDictType()
  } else {
    await addDictType()
  }
  emit('dictChange')
  onCancel()
}

const updateDictType = async () => {
  const res = await dictUpdate(dictForm.value)
  if (res.code != '200') {
    ElMessage({
      type: 'error',
      message: res.message
    })
    return
  } else {
    ElMessage({
      type: 'success',
      message: '操作成功'
    })
  }
}
const addDictType = async () => {
  const res = await dictAdd(dictForm.value)
  if (res.code != '200') {
    ElMessage({
      type: 'error',
      message: res.message
    })
    return
  } else {
    ElMessage({
      type: 'success',
      message: '操作成功'
    })
  }
}

//关闭弹窗
// eslint-disable-next-line vue/valid-define-emits
const emit = defineEmits()
const onCancel = async () => {
  emit('update:dialogVisible', false)
}
//api
</script>
<style lang="scss" scoped>
.user-editor-form {
  :deep(.inline) {
    display: inline-flex;
    vertical-align: middle;
    width: 50%;
  }
}
</style>
